<template>
  <div class="k-tabview">
    <el-tabs type="card" ref="tabsRef" class="k-tabview-content select-none">
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
        :closable="true"
      ></el-tab-pane>
      <!-- <el-tab-pane
        v-for="item in tabsViewList"
        :key="item.fullPath"
        :name="item.fullPath"
        :closable="!item.meta.noClosable"
      >
        <template #label>
          <div
            @contextmenu.prevent="openMenu($event, item.fullPath)"
            class="webCenter"
          >
            <el-icon v-show="layout.isTagsviewIcon">
              <SvgIcon :name="item.meta.icon" />
            </el-icon>
            <span class="el-icon--right">{{ item.meta.title }}</span>
          </div>
        </template>
      </el-tab-pane> -->
    </el-tabs>
    <kTagListMenu />
  </div>
</template>

<script setup lang="ts">
import kTagListMenu from './kTagListMenu.vue'
import type { TabPaneName } from 'element-plus'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])

const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: 'remove' | 'add',
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
</script>

<style lang="scss" scoped>
$defaultHeight: 36px;
.k-tabview {
  @apply h-[50px] relative flex justify-between items-center;
  border-bottom: 1px solid var(--el-border-color);
  padding: 0 20px;
  background: var(--el-color-white);
  &-content {
    width: calc(100% - 40px);
    height: $defaultHeight;
    :deep() {
      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        height: $defaultHeight;
        line-height: $defaultHeight;
      }
      .el-tabs__header {
        border-bottom: 0;
        margin: 0;

        .el-tabs__nav {
          border: 0;
        }
        .el-tabs__item {
          box-sizing: border-box;
          height: $defaultHeight;
          line-height: $defaultHeight;
          margin-right: 5px;
          border: 1px solid var(--el-border-color);
          border-radius: 2.5px;
          transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
          &.is-active {
            color: var(--el-color-primary) !important;
            background: var(--el-color-primary-light-9) !important;
            border: 1px solid var(--el-color-primary) !important;
            outline: none;
          }
          &:hover {
            border: 1px solid var(--el-color-primary) !important;
          }
        }
      }
      .el-tabs__content {
        display: none;
      }
      .is-disabled {
        cursor: not-allowed;
      }
    }
  }
}
</style>
